<template>
	<div class="hote-room-status-info">
		<div class="hote-status-box" v-for="status in statusData">
			<img :src="status.image" alt="" class="status-image">
			<span class="status-label">{{status.label}}</span>
		</div>
	</div>
</template>

<style>
	.status-image {
		width: 20px;
		height: 20px;
	}
	.status-label {
		vertical-align: text-bottom;
	}
	.hote-status-box {
		display: inline-block;
		margin-right: 10px;
		padding: 5px 0;
		line-height: 20px;
	}
</style>

<script>
	import config from '../../config';
	const statusData = config.status || [];

	export default {
		data() {
			return {
				statusData
			}
		}
	}
</script>